<template>
  <div class="cont_list">
    <transition-group name="Item" appear>
      <Item v-for="todo in todo_list" :key="todo.id" :todo_list="todo" :Alldata="todo_list" />
    </transition-group>
  </div>
</template>

<script>
import Item from './Item'

export default {
  name: 'ListL',
  components: { Item },
  props: ['todo_list']
}
</script>

<style scoped>
.cont_list {
  width: 600px;
  margin: 0 auto;
  border-radius: 5px;
}

.Item-enter-active {
  animation: identifier .5s linear;
}

.Item-leave-active {
  animation: identifier .5s reverse linear;
}

@keyframes identifier {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(0);
  }
}

/* .Item.enter,
.Item-leave-to{
  transform: translateX(100%);
}

.Item-enter-acitve,
.Item-leave-acitve {
  transition: all .5s;
}

.Item-leave,
.Item-enter-to {
  transform: translateX(0);
} */
</style>